<template>
    <div>ref() 的浅层作用形式。</div>
    <div>state.count==  {{ state.count }}</div>
    <div class="tips">
        与ref不同，浅层ref的内部值将会原样存储和暴露，但不会被深层递归转为响应式。只有对.value的访问是响应式的。
        <br/><br/>
        shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。
    </div>
    <h3>triggerRef()</h3>
    <div>强制触发依赖于一个浅层ref的副作用，这通常对浅层ref进行深度变更了很有用</div>
    <div>shallow.greet==  {{ shallow.greet }}</div>
    <a-button type="primary" @click="handletrigger">triggerRef触发</a-button>
</template>
<script lang="ts" setup>
import { shallowRef, watchEffect, triggerRef } from 'vue'
const state = shallowRef({ count: 1 })
// 不会触发更改
// setTimeout(() => {
//     console.log('state.value发生了变化，但视图不会发生变化', Date.now())
//     state.value.count = 2
// }, 2000)
// 会触发更改
// setTimeout(() => {
//     console.log('state.value发生了变化，触发更改', Date.now())
//     state.value = { count: 3 }
// }, 5000)


const shallow = shallowRef({
  greet: 'Hello, world'
})
// 触发该副作用第一次应该会打印 "Hello, world"
watchEffect(() => {
  console.log('watchEffect==', shallow.value.greet)
})
// 这次变更不应触发副作用，因为这个 ref 是浅层的
setTimeout(() => {
    console.log('改变greet')
    shallow.value.greet = 'Hello, universe'
}, 2000)
// 打印 "Hello, universe"
const handletrigger = () => {
 triggerRef(shallow)
}
</script>
<style>
.tips {
    margin-top: 10px;
    border: 1px solid #efefef;
    padding: 10px;
    font-size: 12px;
    color: #808000	;
}
</style>